<template>
  <el-col :span="24">
    <vab-card class="page-header" shadow="never">
      <!-- <el-avatar class="page-header-avatar" :src="avatar" /> -->
      <div class="page-header-tip">
        <p
          class="page-header-tip-title"
          style="display: flex; flex-direction: row"
        >
          {{ handleTips() }}
          <el-skeleton
            v-if="!user.realName"
            animated
            :rows="1"
            style="width: 120px"
          >
            <template #template>
              <div style="padding: 0 6px">
                <el-skeleton-item style="width: 100%" variant="h3" />
              </div>
            </template>
          </el-skeleton>
          {{ user.realName }}，
          <el-skeleton v-if="!thisTime" animated :rows="1" style="width: 120px">
            <template #template>
              <div style="padding: 0 6px">
                <el-skeleton-item style="width: 100%" variant="h3" />
              </div>
            </template>
          </el-skeleton>
          {{ thisTime }}
        </p>
        <p class="page-header-tip-description" v-html="description"></p>
      </div>
      <!-- <div class="my-card" @click="jumpToEmployed()">
        <div>当前在职</div>
        <div class="my-card-say">
          <vab-icon icon="user-follow-fill" style="color: #3c4a54" />
          {{ employedNums ? employedNums : '--' }}人
        </div>
      </div>
      <div class="my-card" @click="jumpToDismissed()">
        合同到期
        <div class="my-card-say">
          <vab-icon icon="user-unfollow-fill" style="color: #3c4a54" />
          {{ dismissedNums ? dismissedNums : '--' }}人
        </div>
      </div> -->
    </vab-card>
  </el-col>
</template>

<script>
  import { computed, defineComponent, reactive, toRefs } from 'vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  import { getUserInfo } from '@/api/user'
  // import { getList } from '@/api/description'

  export default defineComponent({
    components: {},
    setup() {
      const store = useStore()
      const router = useRouter()
      const username = computed(() => store.getters['user/username'])

      const state = reactive({
        thisTime: '',
        description: '',
        employedNums: 0,
        dismissedNums: 0,
        username: null,
        user: {},
        avatatList: [
          {
            avatar: 'https://i.gtimg.cn/club/item/face/img/2/15922_100.gif',
            username: 'good luck',
          },
          {
            avatar:
              'https://gitee.com/chu1204505056/image/raw/master/user/fwfmiao.gif',
            username: 'fwfmiao',
          },
          {
            avatar: 'https://i.gtimg.cn/club/item/face/img/3/15643_100.gif',
            username: '嘻嘻',
          },
        ],
      })
      state.username = username
      const handleTips = () => {
        const hour = new Date().getHours()
        return hour < 8
          ? `早上好，`
          : hour <= 11
          ? `上午好，`
          : hour <= 13
          ? `中午好，`
          : hour < 18
          ? `下午好，`
          : `晚上好，`
      }
      const jumpToEmployed = () => {
        router.push('/employmentRecord/query')
      }
      const jumpToDismissed = () => {
        router.push('/employmentRecord/historyList')
      }
      const fetchData = async () => {
        const {
          data: { userInfo },
        } = await getUserInfo()
        state.user = Object.assign({}, userInfo)
        //暂时用假的替代
        state.description = '科尔沁史诗音像档案系统'
        setInterval(() => {
          getToday()
        }, 1000)
      }

      const getToday = () => {
        const date = new Date()
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0') // 月份是从0开始的，所以需要加1，并用padStart方法补零
        const day = String(date.getDate()).padStart(2, '0') // getDate方法返回的是月份中的哪一天（1-31），也需要补零
        // const hours = String(date.getHours()).padStart(2, '0') // 获取小时并补零
        // const minutes = String(date.getMinutes()).padStart(2, '0') // 获取分钟并补零
        // const seconds = String(date.getSeconds()).padStart(2, '0') // 获取秒并补零
        // state.thisTime = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`
        state.thisTime = `${year}年${month}月${day}日`
      }

      fetchData()

      return {
        ...toRefs(state),
        avatar: computed(() => store.getters['user/avatar']),
        handleTips,
        getToday,
        jumpToEmployed,
        jumpToDismissed,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .page-header {
    min-height: 125px;
    transition: none;

    :deep() {
      * {
        transition: none;
      }

      .el-card__body {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }
    }

    &-avatar {
      width: 60px;
      height: 60px;
      margin-right: 20px;
      border-radius: 50%;
    }

    &-tip {
      flex: auto;
      width: calc(100% - 800px);
      min-width: 300px;

      &-title {
        margin-bottom: 12px;
        font-size: 20px;
        font-weight: bold;
        color: #3c4a54;
      }

      &-description {
        min-height: 20px;
        font-size: $base-font-size-default;
        color: #808695;
      }
    }

    &-avatar-list {
      flex: 1;
      min-width: 100px;
      margin-left: 20px;
      text-align: right;

      p {
        margin-right: 9px;
        line-height: 0;
      }
    }
    .my-card {
      width: 140px;
      margin-left: 20px;
      background-color: #e8eaea;
      border-radius: 8px;
      height: 72px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      color: #3c4a54;
      font-weight: bold;
      font-size: 14px;
      cursor: pointer;
      user-select: none;
      .my-card-say {
        color: #5b94ba;
        font-size: 22px;
      }
    }
  }
</style>
